<template>
  <div id="container">
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
  export default {
    name: "ManageContainer",
    data() {
      return {
        data: [{
          label: '所有项目',
          children: [{
            label: '首页',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '课程介绍',
            children: [{
              label: '三级 2-2-1'
            }]
          }, {
            label: '教学团队',
            children: [{
              label: '三级 2-2-1'
            }]
          }, {
            label: '课程建设',
            children: [{
              label: '三级 2-2-1'
            }]
          }, {
            label: '课程资源',
            children: [{
              label: '三级 2-2-1'
            }]
          }, {
            label: '问题与答疑',
            children: [{
              label: '三级 2-2-1'
            }]
          }, {
            label: '课程研究',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }

  }
</script>

<style scoped>
  #container {
    width: 200px;
    margin-left: 40px;
  }
</style>
